<template>
  <button @click="isShow = true">点击显示</button>
  <button @click="isShow = false">点击隐藏</button>
  <Transition>
    <div class="box" v-if="isShow"></div>
  </Transition>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: greenyellow;
}
// vue动画
.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: all 3s linear;
}
.v-enter-to {
  opacity: 1;
}

.v-leave-form{
    opacity: 1;
}
.v-leave-active{
    transition: all 3s linear;
}
.v-leave-to{
    opacity: 0;
}
</style>
